@using System.Threading;
@implements IDisposable

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-sm-12 p-4">
            <RadzenText TextStyle="TextStyle.H5" TagName="TagName.H3">Clock</RadzenText>
            <RadzenText TextStyle="TextStyle.Body1">
                Demonstrates using multiple pointers with RadzenRadialGauge.
            </RadzenText>
            <RadzenRadialGauge Style="width: 100%; height: 500px;">
                <RadzenRadialGaugeScale Step="1" Min="0" Max="12" StartAngle="0" EndAngle="360" ShowFirstTick="false"
                    MinorStep=@minorStep
                    TickLength="20"
                    MinorTickLength="10"
                    TickLabelOffset="40"
                    TickPosition="GaugeTickPosition.Inside">
                    <RadzenRadialGaugeScalePointer Value=@hours Length="0.6" ShowValue="false" />
                    <RadzenRadialGaugeScalePointer Value=@seconds Length="0.9" Fill="red" Width="2" ShowValue="false" />
                    <RadzenRadialGaugeScalePointer Value=@minutes Length="0.8" ShowValue="false" />
                </RadzenRadialGaugeScale>
            </RadzenRadialGauge>
        </div>
        <div class="col-md-6 col-sm-12 p-4">
            <RadzenText TextStyle="TextStyle.H5" TagName="TagName.H3">Activity</RadzenText>
            <RadzenText TextStyle="TextStyle.Body1">
                Shows how to use multiple scales with RadzenArcGauge
            </RadzenText>
            <RadzenArcGauge Style="width: 100%; height: 500px; background: #000">
                <RadzenArcGaugeScale Min="0" Max="520" StartAngle="0" EndAngle="360" Fill="rgba(249, 32, 99, 0.5)">
                    <RadzenArcGaugeScaleValue Value=@move Fill="rgb(249, 32, 99)">
                        <Template>
                            <svg width="100%" viewBox="0 0 240 120" >
                                <text x="90" y="10" fill="#fff">
                                    Move <tspan fill="rgb(249, 32, 99)">@(Math.Round(move/520 * 100))%</tspan>
                                </text>
                                <text x="90" y="28" fill="rgb(249, 32, 99)">
                                    @move/520 cal 
                                </text>
                                <text x="90" y="50" fill="#fff">
                                    Exercise <tspan fill="rgb(203, 255, 0)">@(Math.Round(exercise/30 * 100))%</tspan>
                                </text>
                                <text x="90" y="68" fill="rgb(203, 255, 0)">
                                    @exercise/30 min 
                                </text>
                                <text x="90" y="88" fill="#fff">
                                    Stand <tspan fill="rgb(0, 253, 234)">@(Math.Round(stand/12 * 100))%</tspan>
                                </text>
                                <text x="90" y="106" fill="rgb(0, 253, 234)">
                                    @stand/12 hr 
                                </text>
                            </svg>
                        </Template>
                    </RadzenArcGaugeScaleValue>
                </RadzenArcGaugeScale>
                <RadzenArcGaugeScale Min="0" Max="30" StartAngle="0" EndAngle="360" Radius="0.8" Fill="rgba(203, 255, 0, 0.5)">
                    <RadzenArcGaugeScaleValue Value=@exercise Fill="rgb(203, 255, 0)" ShowValue="false" />
                </RadzenArcGaugeScale>
                <RadzenArcGaugeScale Min="0" Max="12" StartAngle="0" EndAngle="360" Radius="0.6" Fill="rgb(0, 253, 234, 0.5)">
                    <RadzenArcGaugeScaleValue Value=@stand Fill="rgb(0, 253, 234)" ShowValue="false" />
                </RadzenArcGaugeScale>
            </RadzenArcGauge>
        </div>
    </div>
</div>

@code {
    Timer timer;
    double hours;
    double minutes;
    double seconds;

    double minorStep = 12 / 60.0;

    double move = 338;
    double exercise = 2;
    double stand = 8;

    protected override void OnInitialized()
    {
        timer = new Timer(state =>
        {
            var now = DateTime.Now;

            hours = now.Hour % 12 + now.Minute / 60.0;

            minutes = now.Minute * minorStep + now.Second * 12 / 3600.0;
            seconds = now.Second * minorStep;

            InvokeAsync(StateHasChanged);
        }, null, 0, 1000);
    }

    public void Dispose()
    {
        timer?.Dispose();
    }
}